<script setup>
import { onMounted, ref } from 'vue'
import DataBaseTableInfo from '@/components/coms/devAndTest/devAndTestInfo/DataBaseTableInfo.vue'
import DatabaseTableAddForm from '@/components/coms/devAndTest/devAndTestInfo/DatabaseTableAddForm.vue'
import DatabaseTableUpdateForm from '@/components/coms/devAndTest/devAndTestInfo/DatabaseTableUpdateForm.vue'
import { useDataBaseInfoStore } from '@/stores/dataBaseInfo.js'
import CodeGen from '@/components/coms/codeGen/CodeGen.vue'

const databaseStore = useDataBaseInfoStore();



onMounted(() => {

  databaseStore.loadDatabaseInfo();

})


const open = ref(false);
const addTableOpen = ref(false);
const updateTableOpen =ref(false);
const codeGenOpen = ref(false);



const showModal = (data) => {
  console.log("data",data);
  databaseStore.checkTableId=data.id;
  open.value = true;
};

const showoAddTableModal = () => {
  addTableOpen.value = true;
};

const showUpdateTableModal = () => {
  updateTableOpen.value = true;
};

const columns = [
  {
    title: '表名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '表功能描述',
    dataIndex: 'description',
    key: 'description',
  },
  {
    title: '表字段数量',
    key: 'fieldNumber',
    dataIndex: 'fieldNumber',
  },
  {
    title: 'Action',
    key: 'action',
  },
];
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];



</script>

<template>

  <a-modal v-model:open="open" title="编辑当前表字段" style="width: 1200px" @ok="handleOk">
    <DataBaseTableInfo></DataBaseTableInfo>
  </a-modal>


  <a-modal v-model:open="addTableOpen" title="创建表" :footer="null" style="width: 900px" @ok="handleOk">
    <DatabaseTableAddForm></DatabaseTableAddForm>
  </a-modal>

  <a-modal v-model:open="updateTableOpen" title="编辑表" :footer="null" style="width: 950px" @ok="handleOk">
    <DatabaseTableUpdateForm></DatabaseTableUpdateForm>
  </a-modal>

  <a-space style="padding-bottom: 10px" wrap>
  <a-button type="primary" @click="showoAddTableModal">添加表</a-button>

  <a-button type="primary" @click="databaseStore.loadDatabaseInfo()">手动刷新数据</a-button>

    <a-button type="primary" danger @click="codeGenOpen=true;">根据数据库生成</a-button>


  </a-space>

  <a-drawer
    title="生成代码"
    placement="top"
    :closable="true"
    :open="codeGenOpen"
    @close="codeGenOpen=false"
  >
<CodeGen></CodeGen>
  </a-drawer>




  <a-table :columns="columns" :data-source="databaseStore?.checkedDataBaseInfo">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">

      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>

      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag
            v-for="tag in record.tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>

      <template v-else-if="column.key === 'action'">
        <span>

          <a-space warp>

          <a-button type="primary" @click="showUpdateTableModal" >编辑表信息</a-button>
          <a-button  @click="showModal(record)">编辑字段信息 </a-button>
 <a-popconfirm
   title="您确认要删除当前表吗"
   ok-text="Yes"
   cancel-text="No"
   @confirm="databaseStore.deleteTable(record)"
 >
          <a-button type="primary" danger>删除当前表</a-button>
 </a-popconfirm>
          </a-space>
        </span>
      </template>

    </template>
  </a-table>
</template>

<style scoped>

</style>
